<template>
  <div class="desktop_tip_icon">
    <el-tooltip
      class="box-item"
      effect="dark"
      :content="item.text"
      v-for="(item, index) in propmpts"
    >
      <a
        class="icon"
        :style="iconStyle(index)"
        @mousedown="recognizeIcon(item)"
        :key="item.id"
      >
        <!-- <i class="iconfont">&#xe8bb;</i> -->
        <img :src="item.icon" :alt="item.text" />
      </a>
    </el-tooltip>
    <a class="icon">
      <el-popover
        :visible="visible"
        placement="bottom"
        width="300"
        trigger="click"
        height="200"
      >
        <div class="seting_content">
          <div class="slider-demo-block">
            <span class="demonstration">图标数量: </span>
            <el-slider
              v-model="maxPropmptNum"
              :min="5"
              :max="allPropmptsRef.length"
            />
          </div>
        </div>

        <div style="text-align: right; margin: 0">
          <el-button size="small" text @click="cancel">取消</el-button>
          <el-button size="small" type="primary" @click="confirm"
            >确认</el-button
          >
        </div>
        <template #reference>
          <img @mousedown="showMore" src="@/assets/desktop/more.png" />
        </template>
      </el-popover>
    </a>
  </div>
</template>
<script lang="ts">
import { Propmpt } from "@/types";
import { defineComponent, ref } from "vue";
// import defaultPropmpts from "@/config.ts";
import { getSimilarName, isElectron } from "@/utils";

export default defineComponent({
  props: [],
  setup() {
    let defaultPropmpts: any[] = [];
    let allPropmpts = JSON.parse(localStorage.getItem("propmpts") || "null");
    let infoOptionList = JSON.parse(
      localStorage.getItem("infoOptionList") || "null"
    );
    const defaultNamesOpt = infoOptionList.find(
      (v: any) => v.application_name === "其他"
    );
    const defaultNames = defaultNamesOpt.option_list;
    const allPropmptsRef = ref<Propmpt[]>(allPropmpts);
    const propmpts = ref<Propmpt[]>(defaultPropmpts);
    const visible = ref(false);
    const maxPropmptNum = ref(8);
    let confirmPropmptNum = maxPropmptNum.value;
    const iconItemWith = 30;

    const ipcRenderer = isElectron() ? require("electron").ipcRenderer : null;
    const recognizeIcon = async (propmpt: Propmpt) => {
      console.log(propmpt);
      localStorage.setItem(
        "curPropmpt",
        JSON.stringify({
          ...propmpt,
        })
      );
      if (ipcRenderer) {
        await ipcRenderer.invoke("msg");
      }
    };

    const setPropmpt = async (name?: string) => {
      console.log(name);
      const curWindowName =
        getSimilarName(name ? name : "其他", infoOptionList) || "其他";
      const firstOpt = infoOptionList.find(
        (v: any) => v.application_name === curWindowName
      );
      const firstNames = firstOpt.option_list || [];
      const lastNames: any[] = [];
      defaultNames.map((item: any) => {
        if (!firstNames.includes(item)) lastNames.push(item);
      });
      const thisNames = [...firstNames, ...lastNames];
      const thisIconVal: any[] = [];
      thisNames.map((name: any) => {
        allPropmpts.map((item: any) => {
          if (item.text === name) thisIconVal.push(item);
        });
      });
      console.log(thisNames);
      propmpts.value = thisIconVal.slice(0, confirmPropmptNum);
    };

    if (ipcRenderer) {
      const { ipcRenderer } = require("electron");
      ipcRenderer.on("changeIcon", (_: any, obj: any) => {
        setPropmpt(obj.name);
      });

      ipcRenderer.on("changeIconNum", (_: any, data: any) => {
        console.log(data);
        confirmPropmptNum = data.value;
      });
    } else {
      propmpts.value = defaultPropmpts;
    }

    const iconStyle = (index: any) => {
      if (index === 0) {
        return { "border-radius": "10px 0 0 10px" };
      }
      if (index === propmpts.value.length - 1) {
        return { "border-radius": "0 10px 10px 0" };
      }
      return {};
    };

    const showMore = async () => {
      if (!isElectron()) return;
      ipcRenderer.invoke("openSetting", "icon");
    };
    const setPropmptNum = async () => {
      visible.value = false;
      if (ipcRenderer) {
        await ipcRenderer.invoke("setPropmpt", {
          width: (confirmPropmptNum + 1) * iconItemWith,
          height: 100,
        });
      }
    };

    return {
      allPropmptsRef,
      propmpts,
      recognizeIcon,
      iconStyle,
      visible,
      showMore,
      maxPropmptNum,
      setPropmptNum,
      confirm,
    };
  },
});
</script>
<style scoped>
.desktop_tip_icon {
  display: flex;
  justify-content: space-around;
  align-items: center;
  user-select: none;
  background-color: white;
  /* background-color: rgb(253, 93, 67); */
  border-radius: 10px;
  border: 1px solid #ddd;
  overflow: hidden;
  /* justify-content: space-between; */
  /* padding: 2px; */
}

.desktop_tip_icon .icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 3px;
  cursor: pointer;
}

.desktop_tip_icon .icon:hover {
  background-color: #e5ebeb;
}

.desktop_tip_icon .icon img {
  width: 100%;
  height: 100%;
}

.desktop_tip_icon .icon .iconfont {
  width: 100%;
  height: 100%;
}
</style>
